<template>
    <div class="main">
        <div class="left">
            <div class="custom-tree-container">
                <div class="box inp">
                    <CurrencyInput
                        v-model="inpVal"
                        style="width: 240px"
                        placeholder="搜索部门名称"
                        :prefix-icon="Search"
                        @change="treeSearch"
                    ></CurrencyInput>
                </div>
                <div class="box select">
                    <CurrencySelect
                        v-model="selectVal"
                        :options="[
                            {label: '2026级', value: 6 },
                            {label: '2025级', value: 5 },
                            {label: '2024级', value: 4 },
                        ]"
                        multiple
                        collapse-tags
                        filterable
                        :max-collapse-tags="2"
                        placeholder="全部"
                        style="width: 240px"
                        @change="handelSelect"
                    ></CurrencySelect>
                </div>


            </div>

            <el-scrollbar
                class="scrollbar"
            >
                <el-tree
                    :data="leftTreeData" 
                    :props="{label: 'name'}"
                    
                    :item-size="60"

                    scrollbar-always-on
                    highlight-current
                    default-expand-all  
                    :showSelect="true"
                    @node-click="treeClick"
                    class="tree"
                >
                    <template #default="{ data }">
                        <div class="custom-tree-node">
                            <div class="left-box" v-if="data.type">
                                {{
                                    data.type === 1 ? '校' :
                                    data.type === 2 ? '院' :
                                    data.type === 3 ? '部' :
                                    data.type === 4 ? '专' :
                                    data.type === 5 ? '班' : ''
                                }}
                            </div>
                            <span class="right-text">{{data.name}}</span>
                        </div>
                    </template>
                </el-tree>
            </el-scrollbar>
        </div>
        <div class="right hide-scrollbar">
            <!-- <tabList
                :tabs="tabs"
                :activeName="activeName"
                @tabChange="handelChange"
            ></tabList> -->

            <!-- v-if="params.grandeIds" -->
            <CurrencyTable
                :ref="(e: any) => createRef(e, 'tableRef')"
                :data="data"
                :items="items"
                :btns="btns"
                :columns="columns"
                :params="params"
                :adaptive="true"
            />
        </div>
    </div>

    <!-- 学生数据导入 -->
     <div>
        <studentDataImport
            :ref="(e: any) => createRef(e, 'studentDataImportRef')"
        ></studentDataImport>
     </div>

     <!-- 查看 -->
     <div>
        <detailPage
            :ref="(e: any) => createRef(e, 'studentDetailPageRef')"
        ></detailPage>
     </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { refs, createRef, aesDecrypt  } from 'dsrz/utils'
import studentDataImport from './components/studentDataImport.vue'
import detailPage from './detailPage.vue'
import { 
    items, 
    btns,
    columns,
    params,
    query,
    reviseClassOptions,
    activeName,
    editActiveName
} from './config'

import { leftTreeData_clone } from './cloneData'
import { Search } from '@element-plus/icons-vue';

defineOptions({ name: 'StudentPage' })

const inpVal = ref('')
const selectVal = ref<(number | string)[]>([])

const data = ref([
  {
    deptName: 'deptName',
    nickname: 'nickname',
    code: 'code',
    createTime: 'createTime',
    username: 'username',
    phone: 'phone',
    enable: true,
    id: 1,
  },
  {
    deptName: 'deptName',
    nickname: 'nickname',
    code: 'code',
    createTime: 'createTime',
    username: 'username',
    phone: 'phone',
    enable: false,
    id: 2,
  },
])


const tabs: { name: string, label: string }[] = [
    {
        label: '正常账号1',
        name:'1'
    },
    {
        label: '停用账号2',
        name:'0'
    },
]
// const activeName = ref('1')
const handelChange = (tabVal: string) => {
    editActiveName(tabVal)
    // activeName.value = tabVal
    // params.enable = Boolean(+tabVal)
}

const selected = ref<number[]>([])
const handelSelect = (val: number[]) => { 
    selected.value = val
    console.log('== xz ', val)
    getTreeData({
        grandeIds: selected.value
    })
    params.grandeIds = selected.value
}

// -------获取左侧树列表
const leftTreeData = ref<unknown[]>([])
leftTreeData.value = leftTreeData_clone
console.log('== 33 ',leftTreeData.value)
const getTreeData = async (data = {}) => { 
    const data1 = {
        college: 1,
        ...data
    }
    // const res = await getTreeList(data1)
    // leftTreeData.value = [res.data]
}
// getTreeData()
const treeSearch = (inpVal: string) => { getTreeData({ name: inpVal }) }

interface Tree {
  id: number
  name: string
  children?: Tree[]
  type:number
}
const treeClick = (val: Tree) => { 
    console.log('== c ', val)
    const { id, type } = val
    reviseClassOptions({
        deptType: type,
        deptId: id,
        grandeIds: selected.value
    })
    params.deptType = type
    params.deptId = id
    params.grandeIds = selected.value
}
</script>

<style scoped lang="scss">
.main {
    height: calc(100% - 42px);
    // overflow: hidden;
    display: flex;
    .left {
        background: #F4F6F8;
        height: 100%;
        border-right: 1px solid rgba(0,0,0,0.25);
        /* overflow: scroll; */
        .tree {
            flex: 1;
            height: 100%;
            ::v-deep(.el-vl__wrapper) {
                height: 100%;
                ::v-deep(.el-vl__window .el-tree-virtual-list) {
                    height: 100% !important;
                }
            }
        }

        .custom-tree-container {
            .box {
                padding: 22px 16px 0;
            }
            .inp {
                ::v-deep .el-input__wrapper {
                    border-radius: 51px;
                }
            }
            .el-tree {
                --el-tree-node-content-height: 34px;
                background-color: #f4f6f8;
                margin-top: 16px;
            }
            ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
                background-color:rgba(23, 135, 130, 0.10);
            }
        }

        .scrollbar {
            height: calc(100vh - var(--dsrz-header-height) - 40px - 54px - 22px - 54px);
            
            // 设置树节点间距
            ::v-deep(.el-tree) {
                margin-top: 16px;
                .el-tree-node {
                    margin-top: 8px; // 节点之间的间距
                    
                    .el-tree-node__content {
                        /* padding: 8px 0; // 节点内容的内边距 */
                        margin-bottom: 4px; // 节点内容的下边距
                    }
                }
            }
        }

        /* tree */
        .custom-tree-node {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
            .left-box {
                width: 30px;
                height: 30px;
                background-color: var(--dsrz-theme-color);
                border-radius: 5px;
                color: #fff;
                line-height: 30px;
                text-align: center;
                margin: 10px;
            }
            .right-text {
                color: #6F6F6F;
                font-size: 14px;
                font-weight: 500;
            }
        }
        
    }
    .right {
        padding-right: 10px;
        flex: 1;
        overflow: scroll;
    }
}
</style>